<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2_使用js创建虚拟DOM</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/javascript">
      // 1.创建虚拟DOM
      // const VDOM = React.createElement(标签名， 标签属性， 标签内容)
      const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Hello World!')) // 直接元素名，不需要<>
      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"))
    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this page for starting a new React project with JSX:
      https://react.dev/learn/start-a-new-react-project

      Read this page for adding React with JSX to an existing project:
      https://react.dev/learn/add-react-to-an-existing-project
    -->
  </body>
</html>